<template>
    <div class="colortext">
        <!-- <teleport to="body"> -->
        <van-popup v-model="visible" :style="{ padding: '10px', width: '80vw', height: '80vh' }">
            <van-nav-bar :title="keyName" left-text="关闭" @click-left="visible = false;" />
            <van-row>
                <van-col span="24" style="text-align: center;">

                    <van-checkbox-group v-model="identityChk" direction="horizontal" style="justify-content: center;">
                        <van-checkbox shape="square" right-icon="video-o" name="0"
                            style="margin-bottom: 10px">识别公库</van-checkbox>
                        <van-checkbox shape="square" right-icon="video-o" name="1"
                            style="margin-bottom: 10px">识别私库</van-checkbox>
                    </van-checkbox-group>
                </van-col>
            </van-row>
            <div style="text-align: center;font-size: 14px;color:red;">
                <div v-if="keyName=='综合工资范围'" >温馨提示:格式要求比如综合工资:5000-6000</div>
                <div v-if="keyName=='智能计算'" >温馨提示:格式要求比如:计时-26-10-8</div>
            </div>
            <van-row v-if="propType == 'checkbox'">
                <van-col span="24" style="text-align: center;">
                    <van-checkbox-group v-model="defaultChk" direction="horizontal" style="justify-content: center;">
                        <van-checkbox shape="square" right-icon="video-o" name="0"
                            style="margin-bottom: 10px;justify-content: center;">默认钩选</van-checkbox>
                    </van-checkbox-group>
                </van-col>
            </van-row>
            <com-keyword-edit :key-id="keyId" :key-name="keyName" :prop-name="propName" :prop-type="propType"
                ref="keywordedit"></com-keyword-edit>

        </van-popup>
        <!-- </teleport> -->
    </div>
</template>
<script>
import { Toast } from 'vant'
import teleport from './teleport';
import comKeywordEdit from './comKeywordEdit.vue';
export default {
    name: 'comKeywordPopup',
    model: {
        prop: "value",
        event: "change",
    },
    components: {
        comKeywordEdit, teleport
    },
    props: {
        propName: String,
        keyId: String,
        keyName: String,
        propType: String,
        value: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isInitDef: false,
            isInitConfig: false,
            defaultChk: [],
            identityChk: ['0', '1'],
            visible: false
        }
    },
    activated() {
    },
    watch: {
        defaultChk(val) {
            if (this.isInitDef) {
                this.isInitDef = false;
                return;
            }
            this.defaultChkChange(val.length > 0);
        },
        identityChk(val, oldval) {

            if (this.isInitConfig) {
                this.isInitConfig = false;
                return;
            }
            var pubVal = '0';
            var privateVal = '1';
            var v = val.find(m => m == pubVal);
            if (v != oldval.find(m => m == pubVal))
                this.configChange(v == pubVal, false);


            v = val.find(m => m == privateVal);
            if (v != oldval.find(m => m == privateVal))
                this.configChange(v == privateVal, true);
        },
        value(val) {
            //console.log(1,val);
            this.visible = val;
        },
        visible(val) {
            //console.log(2,val);
            this.$emit("change", val);
            if (val) {
                this.$nextTick(() => {

                    //console.log("this.$refs", this.$refs);
                    //console.log("this.$refs['keywordedit']", this.$refs['keywordedit']);
                    //console.log("this.$refs.keywordedit", this.$refs.keywordedit);
                    if (this.$refs.keywordedit)
                        this.$refs.keywordedit.refreshData();

                });
                this.initData();
            }
        }
    },
    mounted() {
        if (this.value) {
            this.visible = true;
        }
    },
    methods: {
        initData() {
            //alert("");
            var params1 = {
                propName: this.propName,
                keyName: this.keyName
            };
            var that = this;
            this.$api.keyword.keywordNameGetConfig(params1).then(res => {
                if (res.code === 200) {
                    that.isInitDef = true;

                    if (res.data)
                        that.defaultChk = ['0']
                    else
                        that.defaultChk = []
                } else {
                    Toast('错误！')
                }
            })
            this.$api.keyword.keywordConfigGetConfig(params1).then(res => {
                if (res.code === 200) {
                    var ary = new Array();
                    if (res.data.item1)
                        ary.push('0');
                    if (res.data.item2)
                        ary.push('1');
                    that.isInitConfig = true;
                    that.identityChk = ary;
                } else {
                    Toast('错误！')
                }
            })
        },
        // configChange1(bl) {
        //     this.configChange(bl, false);
        // },
        // configChange2(bl) {
        //     this.configChange(bl, true);
        // },
        configChange(bl, isPrivate) {
            var params1 = {
                propName: this.propName,
                keyName: this.keyName,
                isPrivate: isPrivate
            };
            if (bl) {
                this.$api.keyword.keywordConfigDelete(params1).then(res => {
                    if (res.code === 200 && res.data) {
                        Toast('操作成功！')
                    } else {
                        Toast('系统出错！')
                    }
                })
            } else {
                this.$api.keyword.keywordConfigAdd(params1).then(res => {
                    if (res.code === 200 && res.data) {
                        Toast('操作成功！')
                    } else {
                        Toast('系统出错！')
                    }
                })
            }
        },
        defaultChkChange(bl) {
            //alert(this.defaultChk)
            var params1 = {
                propName: this.propName,
                keyName: this.keyName,
                keyId: this.keyId
            };
            if (bl) {
                this.$api.keyword.keywordNameAdd(params1).then(res => {
                    if (res.code === 200 && res.data) {
                        Toast('操作成功！')
                    } else {
                        Toast('系统出错！')
                    }
                })
            } else {
                this.$api.keyword.keywordNameDelete(params1).then(res => {
                    if (res.code === 200 && res.data) {
                        Toast('操作成功！')
                    } else {
                        Toast('系统出错！')
                    }
                })
            }
        }
    }
}
</script>
<style scoped>
.colortext::v-deep .van-field__label,
.colortext::v-deep .van-radio__label,
.colortext::v-deep .van-checkbox__label,
.colortext::v-deep .van-field__control {
    color: #323233 !important;
}
</style>
